<template>
	<view class="movie-list-container">
		<view class="movie-head">
			<text class="slogan">
				{{list.categoryTitle}}
			</text>
			<view class="more">
				<text class="more-text" @click="moviesTo(list.categoryTitle)">更多</text>
				<image class="more-img" src="/static/icon/arrow-right.png"></image>
			</view>
		</view>
		
		<view class="movie-l-container">
			<block v-for="item in list.movies" :key="item">
				<movieTemplate :movielist="item"></movieTemplate>
			</block>
		</view>	
	</view>
</template>

<script>
	import movieTemplate from "../movie/movie-template";
	export default {
		props:['lists'],
		data(){
			return{
				list:{}
			}
		},
		methods:{
			moviesTo(e){
				uni.navigateTo({
					url:"/pages/movies/more-movies/more-movies?category="+e
				})
			}
		},
		mounted(){
			this.$watch('lists', function(newVal, oldVal){//双层data先取值再赋值
				if(newVal!==undefined){
					this.list=newVal;
				}
				//console.log(this.list);
			});
		},
		components:{
			movieTemplate
		}
	}
</script>

<style>
	.movie-list-container{background-color: #fff;display: flex;flex-direction: column;width: 100%;margin-bottom: 20rpx;padding-bottom: 20rpx;}
	.movie-head{padding: 30rpx 20rpx 22rpx;display:flex;flex-direction: row;justify-content: space-between;}
	.slogan{font-size: 24rpx;}
	.movie-list-container .more{/* float: right;margin-top: 16px; */}
	.more-text{width: 72rpx;height: 16rpx;color: #1F4ba5;font-size: 26rpx;}
	.more-img{width: 9rpx;height: 18rpx;margin-top: 10px;}
	.movie-l-container{display: flex;flex-direction: row;}
</style>
